window.onload = () => {
    const list = [
        {
            name: "English chan",
            wealth: '784002'
        },
        {
            name: "alex chan",
            wealth: '1137864'
        },
        {
            name: "melon chan",
            wealth: '1397512'
        },
        {
            name: "Clare chan",
            wealth: '584978'
        },
        {
            name: "Abigail chan",
            wealth: '1907914'
        },
        {
            name: "Clarice chan",
            wealth: '336944'
        },
        {
            name: "Vernon chan",
            wealth: '1436450'
        },
    ]

    // 打开/关闭导航栏
    let nav = document.querySelector('nav');
    let main = document.querySelector('main');
    let openNav = document.querySelector('.openNav');
    let mainWidth = main.clientWidth;
    let toggle = true;
    openNav.onclick = () => {
        if (toggle) {
            nav.style.width = '200px';
            main.style.width = mainWidth - '200px';
            toggle = !toggle;
        } else {
            nav.style.width = '0';
            main.style.width = '100%';
            toggle = !toggle;
        }
    }

    // 插入数据
    let dataBox = document.querySelector('.dataBox');
    function createLi(data) {
        // 获取原ul节点
        let cul = document.querySelector('.dataBox>ul');
        // 创建新ul节点
        let ul = document.createElement('ul');
        data.forEach((item, index) => {
            let li = document.createElement('li');

            // 格式化 Wealth
            let wealth = formatWealth(data, index);

            li.innerHTML = `
                <p>${item.name}</p>
                <p>$${wealth}.00</p>
            `
            ul.appendChild(li);
        })
        // 判断是否已存在ul节点，无则插入，有则替换
        if (cul == null) {
            dataBox.appendChild(ul);
        } else {
            dataBox.replaceChild(ul, cul);
        }
    }

    // 格式化 Wealth
    function formatWealth(data, index) {
        let wealth = '';
        if (typeof (data) === 'object') {
            wealth = data[index].wealth.toString();
        } else if (typeof (data) === 'number') {
            wealth = data.toString();
        }
        let str = '';
        let arr = wealth.split("").reverse();
        for (let i = 0; i <= arr.length - 1; i++) {
            if (i % 3 == 0 && i != 0) {
                str += ',';
            }
            str += arr[i];
        }
        return str.split("").reverse().join("");
    }

    let newList = [];
    // 添加账户
    let addUser = document.querySelector('.addUser');
    let count = 0;
    addUser.onclick = () => {
        if (count >= list.length) return;
        newList.push(list[count]);
        createLi(newList);
        count++;
        closeTotal();
    }

    // 资金翻倍
    let double = document.querySelector('.double');
    double.onclick = () => {
        newList.forEach((item) => {
            let wealthNum = item.wealth.split(",").join("");
            item.wealth = (+wealthNum * 2).toString();
        })
        createLi(newList);
        closeTotal();
    }

    // 查询百万富翁
    let search = document.querySelector('.search');
    search.onclick = () => {
        let n = 1000000;
        newList = newList.filter((item) => {
            let wealthNum = +item.wealth.split(",").join("");
            if (wealthNum >= n) {
                return item.wealth == wealthNum.toString();
            }
        })
        createLi(newList);
        closeTotal();
    }

    // 财富榜
    let sort = document.querySelector('.sort');
    sort.onclick = () => {
        let arr = [];
        newList.forEach((item) => {
            arr.push(item.wealth);
        })
        let sortArr = arr.sort((a, b) => {
            return b - a;
        })
        arr = [];
        sortArr.forEach((item1, index1) => {
            if (arr.length < newList.length) {
                newList.forEach((item2) => {
                    if (item1 == item2.wealth) {
                        arr.push(item2)
                    }
                })
            }
        })
        createLi(arr);
        closeTotal();
    }

    function closeTotal(){
        let total = document.querySelector('.totalBox>div');
        if(total) total.remove();
    }

    // 计算总数
    let total = document.querySelector('.total');
    let totalBox = document.querySelector('.totalBox');
    total.onclick = () => {
        let sum = 0;
        newList.forEach((item, index) => {
            let wealthNum = item.wealth.split(",").join("");
            sum += +wealthNum;
        })

        // 格式化 Wealth
        let sumWealth = formatWealth(sum);

        // 获取原ul节点
        let cdiv = document.querySelector('.totalBox>div');
        let div = document.createElement('div');
        div.innerHTML = `
            <p>Total sum:</p>
            <p>$${sumWealth}.00</p>
        `;

        // 判断是否已存在ul节点，无则插入，有则替换
        if (cdiv == null) {
            totalBox.appendChild(div);
        } else {
            totalBox.replaceChild(div, cdiv);
        }
    }
};